<template>
	<view class="content">
		<image src="../../static/home/topbg.png" mode="" class="top-bg"></image>
		<image src="../../static/home/logo.png" mode="" class="top-logo"></image>
		<view class="tabs">
			<view :class="activeTab == index ? 'tab-active':'tab'" v-for="(item,index) in list" :key="index"
				@click="clickTab(index)">
				<view class="tab-title">
					{{item}}
				</view>
				<image src="@/static/home/mohu.png" mode="" v-if="activeTab == index"
					:class="activeTab == 1 || activeTab == 2 ?'tab-image2':'tab-image1'"></image>
			</view>
		</view>
		<view class="index-content">
			<view class="index-info" v-if="token==''">
				<image src="../../static/home/loginbg.png" mode=""></image>
				<view class="logout-title">
					<view class="logout-sub1">
						会员信息
					</view>
					<view class="logout-sub2">
						暂未登录
					</view>
				</view>
				<button class="logout-btn" @click="login">去登录</button>
			</view>
			<view class="index-info" v-else>
				<image src="../../static/home/loginbg.png" mode=""></image>
				<view class="logout-title">
					<image src="../../static/home/test.png" mode="" class="avatar"></image>
					<view class="name">
						会员昵称
					</view>
					<view class="grade">
						<image src="../../static/home/dj.png" mode=""></image>
						<view class="grade-title">
							VIP 1
						</view>
					</view>
				</view>
			</view>
			<view class="index-menu">
				<view class="menu">
					<image src="../../static/home/caidan2.png" mode=""></image>
					<view class="menu-title">
						网站主旨
					</view>
				</view>
				<view class="menu">
					<image src="../../static/home/caidan1.png" mode=""></image>
					<view class="menu-title">
						使用须知
					</view>
				</view>
			</view>
			<view class="index-login" v-if="token==''">
				最新动态 - 登录后查看
			</view>
			<view class="index-trends" v-else>
				<view class="trends-title">
					<view class="title">
						最新动态
					</view>
					<image src="@/static/home/mohu2.png" mode=""></image>
				</view>
				<view class="trends-content">
					<view class="info">
						<uni-badge class="uni-badge-left-margin" :text="`+`+ 23" absolute="rightTop" size="small">
							<view class="badge-box">298</view>
						</uni-badge>
						<view class="info-title">
							谁浏览了我
						</view>
					</view>
					<view class="info">
						<uni-badge class="uni-badge-left-margin" :text="`+`+ 23" absolute="rightTop" size="small">
							<view class="badge-box">298</view>
						</uni-badge>
						<view class="info-title">
							谁关注了我
						</view>
					</view>
					<view class="info">
						<uni-badge class="uni-badge-left-margin" :text="`+`+ 23" absolute="rightTop" size="small">
							<view class="badge-box">298</view>
						</uni-badge>
						<view class="info-title">
							谁给我送
							<image src="../../static/home/hua.png" mode=""></image>
						</view>
					</view>
					<view class="info">
						<uni-badge class="uni-badge-left-margin" :text="`+`+ 23" absolute="rightTop" size="small">
							<view class="badge-box">298</view>
						</uni-badge>
						<view class="info-title">
							谁给我送
							<image src="../../static/home/xin.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="trends-follow">
					<view class="follow-title">
						我关注的
					</view>
					<uv-icon name="arrow-right" size="20"></uv-icon>
				</view>
			</view>
			<view class="index-ads">
				<view class="ads-content">
					<view class="ads">
						<image src="../../static/home/test.png" mode=""></image>
						<view class="ads-title">
							【美人摄影】
						</view>
						<view class="ads-sub">
							杭州市西湖区华泰街道23号
						</view>
					</view>
					<view class="ads">
						<image src="../../static/home/test.png" mode=""></image>
						<view class="ads-title">
							婚礼现场租赁
						</view>
						<view class="ads-sub">
							杭州市西湖区华泰街道23号
						</view>
					</view>
				</view>
			</view>
			<view class="index-list">
				<view class="list-title">
					<view class="title">
						智能推荐
					</view>
					<image src="@/static/home/mohu2.png" mode=""></image>
				</view>
				<view class="lists">
					<DataList></DataList>
					<DataList></DataList>
					<DataList></DataList>
					<DataList></DataList>
				</view>

			</view>
			<view class="zw">

			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<view class="modal">
				<view class="modal-title">
					该账号已注销
				</view>
				<view class="modal-sub">
					需重新激活，继续使用
				</view>
				<view class="btns">
					<button class="modal-btn" type="text" @click="activate">去激活</button>
					<button class="modal-btn" type="text" @click="cancel">取消</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import DataList from '../components/dataList.vue'
	export default {
		components: {
			DataList
		},
		data() {
			return {
				activeTab: 0,
				list: ['首页', '婚恋课堂', '线下活动', '商城', ],
				token: "",
				value: 0,
				customStyle: {
					backgroundColor: '#62ed0d',
					color: '#fff'
				},
				lotype: 0,
			}
		},
		onLoad() {

		},
		mounted() {
			const timer = setInterval(() => {
				if (this.value >= 199) {
					clearInterval(timer)
					return
				}
				this.value++
			}, 100)
		},
		created() {
			this.setToken()
		},
		methods: {
			setToken() {
				uni.setStorageSync('Token',
					'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodW5saWFuLmh1aWRuLmNvbSIsImV4cCI6MTcwNjg1MjU4NCwianRpIjp7ImlkIjoyLCJ0eXBlIjoid3hhcHAifX0.0BlMe6vIdYwzUKXktSrdn6pxUXVPh3K3g1BSBueSW3g'
				)
			},

			clickTab(index) {
				this.activeTab = index
			},
			login() {
				if (this.lotype == 0) {
					this.$refs.popup.open()
				}
			},
			activate() {
				this.$refs.popup.close()
			},
			cancel() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;

		.top-bg {
			width: 100%;
			height: 330rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.top-logo {
			width: 428rpx;
			height: 88rpx;
			position: absolute;
			top: 88rpx;
			z-index: 2;
			// padding-left: 30rpx;
			box-sizing: border-box;
			margin-left: 60rpx;
			object-fit: contain;
		}

		.tabs {
			// margin-top: 88rpx;
			width: 638rpx;
			height: 50rpx;
			// margin-left: 56rpx;
			// margin-right: 56rpx;
			// background-color: red;
			z-index: 10;
			position: absolute;
			top: 224rpx;
			left: 56rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tab {
				// width: 112rpx;
				height: 44rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
				display: flex;
				// background-color: red;
				transform: scale(1);
				display: flex;
				position: relative;
			}

			.tab-active {
				// width: 112rpx;
				height: 44rpx;
				// font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 800;
				transform: scale(1.28);
				color: #000000;
				display: flex;
				position: relative;

				.tab-title {
					z-index: 4;
				}

				// background-color: red;
				.tab-image1 {
					width: 70rpx;
					height: 18rpx;
					position: absolute;
					bottom: 2rpx;
					object-fit: contain;
					left: -6rpx;
				}

				.tab-image2 {
					width: 120rpx;
					height: 18rpx;
					position: absolute;
					bottom: 2rpx;
					object-fit: contain;
					left: -6rpx;
				}
			}
		}

		.index-content {
			width: 750rpx;
			// height: 2170rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 30rpx 12rpx rgba(241, 241, 241, 0.5);
			border-radius: 24rpx;
			position: absolute;
			top: 306rpx;
			z-index: 2;
			padding-top: 24rpx;
			box-sizing: border-box;

			.index-info {
				width: 702rpx;
				height: 162rpx;
				background: #F8F2F2;
				box-shadow: 0rpx 4rpx 30rpx 12rpx rgba(241, 241, 241, 0.5);
				border-radius: 16rpx;
				margin-left: 24rpx;
				margin-right: 24rpx;
				position: relative;
				overflow: hidden;

				image {
					width: 702rpx;
					height: 162rpx;
					position: absolute;
					z-index: 1;
				}

				.logout-title {
					position: absolute;
					z-index: 2;
					top: 32rpx;
					left: 32rpx;
					display: flex;
					width: 128rpx;
					flex-wrap: wrap;

					.logout-sub1 {
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #333333;
						line-height: 44rpx;
					}

					.logout-sub2 {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-top: 20rpx;
						line-height: 34rpx;
					}

					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						left: 16rpx;
						// top: 10rpx;
						position: absolute;
						// background-color: red;
					}

					.name {
						width: 128rpx;
						height: 44rpx;
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #333333;
						position: absolute;
						left: 154rpx;
						// top: 32rpx;
						// background-color: red;
					}

					.grade {
						height: 24rpx;
						width: 400rpx;
						// background-color: red;
						position: absolute;
						left: 154rpx;
						margin-top: 64rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;


						image {
							width: 32rpx;
							height: 24rpx;
							// border: 3rpx solid #FFA54D;
						}

						.grade-title {
							font-size: 24rpx;
							font-family: D-DIN-PRO, D-DIN-PRO;
							font-weight: bold;
							color: #333333;
							margin-left: 42rpx;
						}
					}
				}

				.logout-btn {
					position: absolute;
					z-index: 2;
					top: 52rpx;
					right: 56rpx;
					width: 120rpx;
					height: 58rpx;
					background: #EC8D7E;
					border-radius: 36rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.index-menu {
				// background-color: red;
				height: 208rpx;
				width: 750rpx;
				padding-top: 42rpx;
				padding-left: 140rpx;
				padding-right: 132rpx;
				box-sizing: border-box;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;

				.menu {
					width: 112rpx;
					height: 126rpx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					// background-color: blue;
					image {
						width: 60rpx;
						height: 62rpx;
						object-fit: contain;
					}

					.menu-title {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 40rpx;
					}
				}
			}

			.index-login {
				width: 702rpx;
				height: 196rpx;
				border-radius: 16rpx;
				border: 2rpx solid #F8F7FB;
				margin-left: 24rpx;
				margin-right: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 50rpx;
			}

			.index-trends {
				width: 702rpx;
				height: 370rpx;
				background: linear-gradient(131deg, #FFFFFF 0%, rgba(231, 229, 242, 0.12) 100%);
				border-radius: 16rpx;
				margin-left: 24rpx;
				margin-right: 24rpx;
				// background-color: red;
				padding-top: 40rpx;
				padding-left: 24rpx;
				box-sizing: border-box;

				.trends-title {
					width: 130rpx;
					height: 50rpx;

					// background-color: blue;
					position: relative;

					.title {
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #333333;
						z-index: 2;
						position: absolute;
					}

					image {
						bottom: 0rpx;
						position: absolute;
						width: 120rpx;
						height: 50rpx;
						left: -8rpx;
					}
				}

				.trends-content {
					height: 114rpx;
					width: 100%;
					// background-color: red;
					padding-right: 26rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					margin-top: 36rpx;

					.info {
						width: 122rpx;
						height: 114rpx;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						// background-color: blue;
						.badge-box {
							font-size: 44rpx;
							font-family: D-DIN-PRO, D-DIN-PRO;
							font-weight: bold;
							color: #333333;
							// margin-left: 26rpx;
						}

						.info-title {
							width: 122rpx;
							height: 34rpx;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
							margin-top: 24rpx;
							display: flex;
							align-items: center;

							image {
								width: 28rpx;
								height: 28rpx;
								margin-left: 2rpx;
							}
						}
					}
				}

				.trends-follow {
					width: 666rpx;
					height: 44rpx;
					// background-color: #fff;
					margin-top: 56rpx;
					display: flex;


					.follow-title {
						flex: 1;
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #333333;
					}
				}
			}

			.index-ads {
				// background-color: red;
				width: 750rpx;
				// height: 470rpx;
				padding: 32rpx 24rpx;
				box-sizing: border-box;

				.ads-content {
					// height: 406rpx;
					width: 100%;
					// background-color: red;
					display: flex;
					justify-content: space-between;

					.ads {
						width: 344rpx;
						// height: 406rpx;
						// background-color: #EC8D7E;
						border-radius: 16rpx;

						image {
							width: 344rpx;
							height: 300rpx;
							// background: #FFCED3;
							border-radius: 16rpx;
						}

						.ads-title {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							color: #333333;
							// line-height: 40rpx;
							margin-top: 16rpx;
						}

						.ads-sub {
							// height: 34rpx;
							width: 312rpx;
							height: 100%;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
							// line-height: 34rpx;
							margin-top: 16rpx;
							// padding-left: 10rpx;
							box-sizing: border-box;
							overflow-wrap: break-word;
						}
					}
				}
			}

			.index-list {
				// background-color: red;
				width: 750rpx;
				// height: 904rpx;
				padding-left: 48rpx;
				padding-top: 40rpx;
				box-sizing: border-box;
				background: linear-gradient(131deg, #FAF4F4 0%, rgba(231, 229, 242, 0.12) 100%);
				border-radius: 16rpx;
				padding-bottom: 16rpx;
				// margin-bottom: 36rpx;

				.list-title {
					width: 130rpx;
					height: 50rpx;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 44rpx;
					position: relative;

					.title {
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #333333;
						z-index: 2;
						position: absolute;
					}

					image {
						bottom: 0rpx;
						position: absolute;
						width: 120rpx;
						height: 50rpx;
						left: -8rpx;
					}
				}

				.lists {
					width: 680rpx;
					// height: 904rpx;
					margin-top: 32rpx;
					// margin-left: 48rpx;
					margin-right: 98rpx;
					box-sizing: border-box;
					// background-color: red;
				}

			}

			.zw {
				height: 34rpx;
				width: 740rpx;
				background-color: #fff;
			}
		}

		.modal {
			width: 558rpx;
			height: 436rpx;
			background: linear-gradient(160deg, #FBE9E7 0%, #FFFFFF 100%);
			border-radius: 20rpx;
			padding-top: 60rpx;
			box-sizing: border-box;

			.modal-title {
				// width: 192rpx;
				width: 558rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				display: flex;
				justify-content: center;
			}

			.modal-sub {
				// width: 280rpx;
				width: 558rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
				display: flex;
				justify-content: center;
				margin-top: 32rpx;
			}

			.btns {
				margin-top: 60rpx;
				height: 196rpx;

				.modal-btn {
					width: 558rpx;
					height: 98rpx;
					border-top: 2rpx solid #F7F7F7;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #FFFFFF;
				}
			}
		}

	}
</style>